<template>
  <section>
    <p class="ft16 mtb20" v-if="title">
      <i class="el-icon-s-flag"></i>
      <span class="ml10">{{ title }}</span>
    </p>
    <table v-if="ListCols.length && ListType == 'table'">
      <tbody v-for="(item, index) in ListCols" :key="`${index}`">
        <tr>
          <th
            v-for="(op, idx) in item"
            :key="`th${idx}`"
            :style="{ minWidth: item.width || width + 'px' }"
          >
            {{ op.label || "-" }}
          </th>
        </tr>
        <tr>
          <td
            　v-for="(op,idx) in item"
            　v-if="op.isShow ? op.isShow(idx):true"
            　:key="`td${idx}`"
            　:style="{minWidth:item.width||width+'px',color:op.color}"
          >
            <p v-if="!op.type || op.showText">
              {{
                (op.formatter && op.formatter(ListData)) ||
                  ListData[op.prop] ||
                  "-"
              }}
            </p>
            <div v-if="op.type == 'img'">
              <div
                class="imglist"
                v-if="op.type == 'img' && ListData[op.prop].length"
              >
                <img
                  　v-if="typeof(ListData[op.prop])=='object'"
                  　v-for="(url,idx) in ListData[op.prop]"
                  　:key="idx"
                  　:src="url|formatImg"
                  　alt
                  　style="width: 50px;height: 50px;"
                />
                <img
                  　v-if="typeof(ListData[op.prop])=='string'"
                  　:src="ListData[op.prop]|formatImg"
                  　alt
                  　style="width: 50px;height: 50px;"
                />
              </div>
              <el-popover :placement="item.placement || 'left'" trigger="click">
                <div>
                  <el-carousel
                    　trigger="click"
                    　style="width: 500px;height: auto;"
                    　arrow="always"
                    　indicator-position="none"
                    　:autoplay="false"
                  >
                    <el-carousel-item
                      　v-for="(url,idx) in ListData[op.prop]"
                      　:key="idx"
                    >
                      <img
                        　:src="url|formatImg"
                        　alt
                        　style="width: 500px;height: 300px;"
                      />
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <el-button 　v-if="op.imglook" 　type="text" 　slot="reference">
                  查看
                </el-button>
              </el-popover>
            </div>
            <div v-if="op.type == 'button'">
              <el-button
                　v-for="(btn,idx) in op.btnList"
                　:key="idx"
                　:disabled="btn.disabled && btn.disabled(idx)"
                　v-if="btn.isShow ? btn.isShow(idx):true"
                　:type="btn.type"
                　:icon="btn.icon"
                　@click="btn.handle(idx)"
              >
                {{ btn.label }}
              </el-button>
            </div>
            <div v-if="op.type == 'input'">
              <el-input
                　v-model="ListData[op.prop]"
                　:style="{width:op.width+'px'}"
                　@change="op.change && op.change(ListData[op.prop])"
                　:placeholder="`Please Input${op.placeholder||''}`"
                　:disabled="op.isDisabled && op.isDisabled(ListData[op.prop])"
              >
              </el-input>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <table v-if="ListRows.length && ListType == 'table'">
      <tbody v-for="(item, index) in ListRows" :key="`${index}`">
        <tr
          　v-for="(op,idx) in item"
          　:key="`th${idx}`"
          　v-if="op.isShow ? op.isShow(idx):true"
        >
          <th :style="{ minWidth: item.width || width + 'px' }">
            {{ op.label || "-" }}
          </th>
          <td
            　v-if="!op.type"
            　:key="`td${idx}`"
            　:style="{
					　　minWidth:item.width||width+'px',
					　　textAlign:'left',
					　　paddingLeft:'10px',
					　　color:op.color,
					　　minWidth:'500px'
					}"
          >
            {{
              (op.formatter && op.formatter(ListData)) ||
                ListData[op.prop] ||
                "-"
            }}
          </td>
          <td v-if="op.type == 'img' && ListData[op.prop]">
            <div class="imglist">
              <img
                　v-if="typeof(ListData[op.prop])=='object'"
                　v-for="(url,idx) in ListData[op.prop]"
                　:key="idx"
                　:src="url|formatImg"
                　alt
                　style="width: 50px;height: 50px;"
              />
              <img
                　v-if="typeof(ListData[op.prop])=='string'"
                　:src="ListData[op.prop]|formatImg"
                　alt
                　style="width: 50px;height: 50px;"
              />
            </div>
            <el-popover :placement="item.placement || 'left'" trigger="click">
              <div>
                <el-carousel
                  　trigger="click"
                  　style="width: 500px;height: auto;"
                  　arrow="always"
                  　indicator-position="none"
                  　:autoplay="false"
                >
                  <el-carousel-item
                    　v-for="(url,idx) in ListData[op.prop]"
                    　:key="idx"
                  >
                    <img
                      　:src="url|formatImg"
                      　alt
                      　style="width: 500px;height: 300px;"
                    />
                  </el-carousel-item>
                </el-carousel>
              </div>
              <el-button 　v-if="op.imglook" 　type="text" 　slot="reference">
                查看
              </el-button>
            </el-popover>
          </td>
          <td v-if="op.type == 'button'">
            <p
              　v-if="!op.type||op.showText"
              　:key="`td${idx}`"
              　:style="{
							minWidth:item.width||width+'px',
							textAlign:'left',
							paddingLeft:'10px',
							color:op.color,minWidth:'500px',
							display:'inline-block'
							}"
            >
              {{
                (op.formatter && op.formatter(ListData)) ||
                  ListData[op.prop] ||
                  "-"
              }}
            </p>
            <el-button
              　v-for="(btn,idx) in op.btnList"
              　:key="idx"
              　:disabled="btn.disabled && btn.disabled(idx)"
              　v-if="btn.isShow ? btn.isShow(idx):true"
              　:type="btn.type"
              　:icon="btn.icon"
              　@click="btn.handle(idx)"
            >
              {{ btn.label || "-" }}
            </el-button>
          </td>
          <td v-if="op.type == 'input'">
            <el-input
              　v-model="ListData[op.prop]"
              　:style="{width:op.width+'px'}"
              　@change="op.change && op.change(ListData[op.prop])"
              　:placeholder="`Please Input${op.placeholder||''}`"
              　:disabled="op.isDisabled && op.isDisabled(ListData[op.prop])"
            >
            </el-input>

            <el-upload
              　style="display: inline-block"
              　v-if="op.upload"
              class="upload-demo"
              　:action="op.upload.action"
              　name="files"
              　:limit="1"
              　:on-success="op.upload.success"
              　:on-exceed="op.upload.handleExceed"
            >
              <el-button size="mini" type="primary">点击上传 </el-button>
            </el-upload>
          </td>
        </tr>
      </tbody>
    </table>
    <table v-if="ListCols.length && ListType == 'Info'">
      <tbody v-for="(item, index) in ListCols" :key="`${index}`">
        <tr v-for="it in Math.ceil(item.length / ColsNum)" :key="it">
          <td
            　v-for="(op,idx) in item"
            　:key="`th${idx}`"
            　v-if="idx<it*ColsNum&&
					　idx>=(it-1)*ColsNum&&
					　(op.isShow ? op.isShow(idx):true)"
          >
            <p
              class="bgf9"
              v-if="!op.hiddenHead"
              :style="{ minWidth: item.width || width + 'px' }"
            >
              {{ op.label || "-" }}
            </p>
            <div v-if="op.hiddenHead" class="headimg">
              <img
                　:src="ListData[op.prop]|formatImg"
                　alt
                　style="width: 100%;height:auto"
              />
            </div>
            <div
              　class="Item"
              　v-if="!op.hiddenHead"
              　:style="{minWidth:item.width||width+'px',color:op.color}"
            >
              <p v-if="!op.type || op.showText">
                {{
                  (op.formatter && op.formatter(ListData)) ||
                    (ListData[op.prop] === 0
                      ? 0
                      : ListData[op.prop]
                      ? ListData[op.prop]
                      : "-")
                }}
              </p>
              <!-- <p v-if="!op.type||op.showText">{{op.formatter && op.formatter(ListData) || ListData[op.prop]||'-'}}</p> -->
              <div
                　class="imgitem"
                　v-if="op.type=='img'&&ListData[op.prop]!=null"
              >
                <div class="imglist">
                  <img
                    　v-if="typeof(ListData[op.prop])=='object'"
                    　v-for="(url,idx) in ListData[op.prop]"
                    　:key="idx"
                    　:src="url|formatImg"
                    　alt
                    　style="width: 50px;height: 50px;"
                  />
                  <img
                    　v-if="typeof(ListData[op.prop])=='string'"
                    　:src="ListData[op.prop]|formatImg"
                    　alt
                    　style="width: 50px;height: 50px;"
                  />
                </div>
                <el-popover
                  :placement="item.placement || 'left'"
                  trigger="click"
                >
                  <div>
                    <el-carousel
                      　trigger="click"
                      　style="width: 500px;height: auto;"
                      　arrow="always"
                      　indicator-position="none"
                      　:autoplay="false"
                    >
                      <el-carousel-item
                        　v-if="typeof(ListData[op.prop])=='object'"
                        　v-for="(url,idx) in ListData[op.prop]"
                        　:key="idx"
                      >
                        <img
                          　:src="url|formatImg"
                          　style="width: 500px;height: 300px;"
                        />
                      </el-carousel-item>
                      <el-carousel-item
                        v-if="typeof ListData[op.prop] == 'string'"
                      >
                        <img
                          :src="ListData[op.prop] | formatImg"
                          style="width: 500px;height: 300px;"
                        />
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                  <el-button
                    　v-if="op.imglook"
                    　type="text"
                    　slot="reference"
                  >
                    <i>查看</i>
                  </el-button>
                </el-popover>
              </div>
              <div v-if="op.type == 'img' && ListData[op.prop] == null">
                None
              </div>
              <div
                v-if="
                  op.btnisShow
                    ? op.btnisShow(idx)
                    : op.type == 'button'
                    ? true
                    : false
                "
              >
                <el-button
                  　v-for="(btn,idx) in op.btnList"
                  　:key="idx"
                  　:disabled="btn.disabled && btn.disabled(idx)"
                  　:type="btn.type"
                  　:icon="btn.icon"
                  　@click="btn.handle"
                  　v-if=" op.btnisShow ? op.btnisShow(idx):true"
                >
                  {{ btn.label }}
                </el-button>
              </div>
              <div v-if="op.type == 'input'">
                <el-input
                  　v-model="ListData[op.prop]"
                  　:style="{width:op.width+'px'}"
                  　@change="op.change && op.change(ListData[op.prop])"
                  　:placeholder="`Please Input${op.placeholder||''}`"
                  　:disabled="op.isDisabled && op.isDisabled(ListData[op.prop])"
                >
                </el-input>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

<script>
export default {
  name: "List",
  props: {
    title: {
      type: String,
      default: ""
    },
    width: {
      type: Number,
      default: 175
    },
    ColsNum: {
      type: [Number, String],
      default: ""
    },
    ListCols: {
      type: Array,
      default: () => []
    },
    ListRows: {
      type: Array,
      default: () => []
    },
    ListData: {
      type: Object,
      default: () => ({})
    },
    ListType: {
      type: String,
      default: "table"
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="scss">
table,
table tr th,
table tr td {
  border: 1px solid #e4e4e4;
}
table {
  width: 100%;
  min-height: 45px;
  line-height: 45px;
  text-align: center;
  border-collapse: collapse;
  padding: 2px;
}
table tr th {
  background-color: #f9fafc;
}
.bgf9 {
  background-color: #f9fafc;
}
.imglist {
  margin: 2px 0 5px;
  display: flex;
  flex-wrap: wrap;
  min-width: 180px;
  max-height: 100%;
  img {
    margin: 5px 5px 0;
  }
}
.Item {
  text-align: center;
  padding: 10px 0;
  height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #e4e4e4;
}
.imgitem {
  display: flex;
  width: 100%;
  align-items: center;
}
.headimg {
  margin: auto;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  width: 140px;
  text-align: center;
  img {
    margin: 5px 5px 0;
  }
}
</style>
